<template>
  <section>
    <!-- <div class="header">
       <div class="headline" :class="library.color" @click="showLibrary">
      <div class="left">
        <i class="line" :class="library.color"></i>
        {{ library.headline }}
      </div>
      <i class="right" :class="{ up: display }"></i>
    </div>

    </div> -->

    <div class="content" v-show="display">
      <div
        class="content-item"
        v-for="(bank, index) in library.bank"
        :key="index"
      >
        <span class="title" :class="library.color"> {{ bank.n }} </span>
        <span v-if="bank.s">
          <span v-if="!bank.h">
            <el-popover
              :close-delay="10"
              placement="bottom"
              trigger="hover"
              v-for="(item, index) in bank.v"
              :key="index"
            >
              <span
                class="item"
                :class="{
                  active:
                    JSON.stringify(indexList).indexOf(
                      JSON.stringify(item.field)
                    ) > -1,
                }"
                slot="reference"
                >{{ item.name }}</span
              >
              <span
                class="sel-item"
                :class="{
                  select: item.index == i && delArr.indexOf(item.field) == -1,
                }"
                v-for="(it, i) in item.range"
                :key="i"
                @click="selectRange(item, it, index, i, bank.v)"
                >{{ it.n }}</span
              >
            </el-popover>
          </span>
          <span v-else>
            <el-popover
              popper-class="pop"
              class="pop"
              :close-delay="10"
              width="238"
              placement="bottom"
              trigger="hover"
              v-for="(item, index) in bank.v"
              :key="index"
            >
              <span
                class="item"
                :class="{
                  active:
                    JSON.stringify(indexList).indexOf(
                      JSON.stringify(item.field)
                    ) > -1,
                }"
                slot="reference"
                >{{ item.name }}</span
              >
              <span
                class="sel-item"
                :class="{
                  select:
                    JSON.stringify(indexList).indexOf(JSON.stringify(it.r)) >
                    -1,
                }"
                v-for="(it, i) in item.range"
                :key="i"
                @click="selectBlock(item, it, index, i, bank.v)"
                >{{ it.n }}</span
              >
            </el-popover>
          </span>
        </span>
        <span v-else>
          <span
            class="item"
            v-for="(item, index) in bank.v"
            :key="index"
            :class="{
              active:
                JSON.stringify(indexList).indexOf(JSON.stringify(item.field)) >
                -1,
            }"
            @click="selectedLeaf(item, index)"
            >{{ item.name }}</span
          >
        </span>
      </div>
      <div class="search" v-if="library.headline == '市场分类库'">
        <span>版块搜索</span>
        <div class="input">
          <img :src="PIC_URL + '/tlbypcWeb/dynamicStock/search_nor.png'" />
          <input type="text" v-model="value" />
          <yn-stock
            :list="list"
            :visible="visible"
            @select="onSelectStock"
          ></yn-stock>
        </div>
        <span class="btn" @click="search">搜索</span>
        <span @click="clear">清除搜索结果</span>
      </div>
    </div>
  </section>
</template>
<script>
import { mapState } from "vuex";
// import { searchblack } from "../script/api";
import { searchblack } from "../api/index";

import stock from "./stock";
export default {
  props: ["library", "show"],
  data() {
    return {
      display: "",
      list: [],
      listData: [],
      arr: [],
      visible: false,
      value: "",
    };
  },
  watch: {
    show: {
      handler(val) {
        this.display = val;
      },
      immediate: true,
    },
  },
  components: {
    "yn-stock": stock,
  },
  computed: {
    ...mapState(["indexList", "delArr"]),
  },
  methods: {
    async search() {
      await searchblack({ bkQuery: this.value }).then((back) => {
        if (back.status == 1) {
          let res = back.data;
          this.list = res.list;
          this.visible = true;

        }
      });
    },
    onSelectStock(item) {
        console.log(item,'===item===')
      var obj = {
        name: `${item.blockType.substring(0, 2)}--${item.stockName}`,
        field: item.blockTypeInt,
        val: item.stockId,
      };
      console.log(obj);
      this.indexList.push(obj);
      // this.value = "";
      // this.visible = false;
    },
    clear() {
      this.value = "";
      this.visible = false;
    },
    // showLibrary() {
    //   this.display = !this.display;
    // },
    selectedLeaf(item, index) {
      console.log("?", item);
      let arrIndex = JSON.stringify(this.indexList).indexOf(
        JSON.stringify(item.field)
      );
      if (arrIndex > -1) {
        for (var i = 0; i < this.indexList.length; i++) {
          if (this.indexList[i].field == item.field) {
            this.indexList.splice(i, 1);
          }
        }
      } else {
        for (var i = 0; i < this.indexList.length; i++) {
          console.log(this.indexList[i].field);
          if (
            this.indexList[i].field.indexOf("jgzb") > -1 &&
            item.field.indexOf("jgzb") > -1
          ) {
            this.indexList.splice(i, 1);
          }
          if (
            this.indexList[i].field.indexOf("market") > -1 &&
            item.field.indexOf("market") > -1
          ) {
            this.indexList.splice(i, 1);
          }
        }
        this.indexList.push(item);
      }
      console.log(this.indexList);

      this.$store.state.indexList = this.indexList;
    },

    selectRange(parent, child, index, ci, bank) {
      // console.log(parent, child);
      let arrIndex = JSON.stringify(this.indexList).indexOf(
        JSON.stringify(parent.field)
      );
      // console.log(arrIndex);
      bank[index].index = ci;
      console.log("bank", bank[index].index);
      // console.log("index", index, bank[index]);
      this.arr.push({ id: index });
      for (let k = 0; k < this.arr.length; k++) {
        console.log(this.arr[k]);
        for (let j = k + 1; j < this.arr.length; j++) {
          // console.log(this.arr[k]["id"]);
          if (this.arr[k]["id"] == this.arr[k]["id"]) {
            this.arr.splice(j, 1);
          }
        }
      }
      if (arrIndex > -1) {
        for (var i = 0; i < this.indexList.length; i++) {
          if (
            this.indexList[i].field == parent.field &&
            this.indexList[i].val == child.r
          ) {
            this.indexList.splice(i, 1);
            bank[index].index = -1;
          } else if (
            this.indexList[i].field == parent.field &&
            this.indexList[i].val != child.r
          ) {
            // console.log("ok");
            this.indexList.splice(i, 1, {
              name: `${parent.name}--${child.n}`,
              field: parent.field,
              val: child.r,
            });
          }
        }
      } else {
        // console.log("arr", this.arr);
        let arrIndex = this.delArr.indexOf(parent.field);

        // console.log(arrIndex);
        if (arrIndex > -1) {
          this.$store.state.delArr.splice(arrIndex, 1);
        }

        this.indexList.push({
          name: `${parent.name}--${child.n}`,
          field: parent.field,
          val: child.r,
        });
      }

      this.$store.state.indexList = this.indexList;
    },
    selectBlock(parent, child, index, ci, bank) {
      console.log(parent, child, index, ci, bank);

      let arrIndex = JSON.stringify(this.indexList).indexOf(
        JSON.stringify(child.r)
      );
      console.log("this.indexList==>", this.indexList);
      console.log("this.parent==>", parent);
      console.log("this.child==>", child);
      console.log(arrIndex);

      bank[index].index = ci;

      console.log("bank", bank[index].index);
      // console.log("index", index, bank[index]);
      this.arr.push({ id: index });

      for (let k = 0; k < this.arr.length; k++) {
        console.log(this.arr[k]);
        for (let j = k + 1; j < this.arr.length; j++) {
          // console.log(this.arr[k]["id"]);
          if (this.arr[k]["id"] == this.arr[k]["id"]) {
            this.arr.splice(j, 1);
          }
        }
      }

      if (arrIndex > -1) {
        console.log("<2>");
        for (var i = 0; i < this.indexList.length; i++) {
          if (
            this.indexList[i].field == parent.field &&
            this.indexList[i].val == child.r
          ) {
            console.log("<3>");
            this.indexList.splice(i, 1);
            bank[index].index = -1;
          }
        }
      } else {
        this.indexList.push({
          name: `${parent.name.substring(0, 2)}--${child.n}`,
          field: parent.field,
          val: child.r,
        });
      }

      this.$store.state.indexList = this.indexList;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
section {
  .header {
    display: flex;
  }

  .headline {
    width: 153px;
    height: 38px;
    font-size: 18px;
    background: #1c1d21;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #0c0e17;
    border-bottom: 1px solid #0c0e17;
    .left {
      display: flex;
      align-items: center;
      .line {
        display: inline-block;
        border-right: 2px solid;
        height: 38px;
        margin-right: 20px;
      }
    }
    .right {
      display: inline-block;
      margin-right: 20px;
      width: 18px;
      height: 11px;
      background: url($PIC_URL + "/tlbypcWeb/dynamicStock/zhankai.png")
        no-repeat;
      &.up {
        background: url($PIC_URL + "/tlbypcWeb/dynamicStock/shouqi.png")
          no-repeat;
      }
    }
  }
  .content {
    padding: 5px 0;
    position: relative;
  }
  .content-item {
    line-height: 26px;
    margin-left: 21px;
    .title {
      display: inline-block;
      width: 64px;
      font-size: 16px;
      margin-right: 20px;
    }
    .item {
      display: inline-block;
      margin-right: 19px;
      font-size: 15px;
      color: #bcbfc4;
      &:hover {
        color: #5e93ff;
      }
      &.active {
        color: #5e93ff;
      }
    }
  }
}
.sel-item {
  box-sizing: border-box;
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  &:hover {
    position: relative;
    box-sizing: border-box;
    background: #35497c;
    // padding: 0 10px;
    height: 23px;
    line-height: 23px;
    border-radius: 2px;
  }
  &.select {
    position: relative;
    color: #fff;
    box-sizing: border-box;
    background: #35497c;
    // padding: 0 10px;
    height: 23px;
    line-height: 23px;
    border-radius: 2px;
  }
}
.search {
  display: flex;
  color: #fff;
  font-size: 15px;
  align-items: center;
  display: flex;
  align-items: center;
  position: absolute;
  left: 420px;
  top: 29px;
  .input {
    box-sizing: border-box;
    width: 175px;
    height: 35px;

    background: #090910;
    border: 1px solid #434448;
    border-radius: 4px 0px 0px 4px;
    margin-left: 10px;
    img {
      width: 12px;
      height: 13px;
      margin: 0 10px;
    }
    input {
      width: 130px;
      background: #090910;
      height: 31px;
      border: none;
      color: #fff;
    }
  }
  .btn {
    display: inline-block;
    box-sizing: border-box;
    width: 92px;
    height: 35px;
    background: linear-gradient(0deg, #343845, #4e596d);
    border: 1px solid #434448;
    border-radius: 0px 4px 4px 0px;
    text-align: center;
    line-height: 35px;
    margin-right: 10px;
  }
}

.wathet {
  color: #72bbff;
}
.orange {
  color: #e65608;
}
.blue {
  color: #728fff;
}
.purple {
  color: #b667ff;
}
.sky-blue {
  color: #67d6ff;
}
.yellow {
  color: #ff9147;
}
</style>

<style lang="scss" soped>
.el-popover {
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;
  padding: 0 20px;
  border-radius: 0;
  font-size: 15px;
  background: #27282e;
  border: 1px solid #000;
  color: #bcbfc4;
}
.pop {
  height: 102px;
  overflow: scroll;
}

.el-popper[x-placement^="bottom"] {
  margin-top: 4px;
}
.el-popper[x-placement^="bottom"] .popper__arrow {
  top: -7px;
  border-bottom-color: #000;
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #27282e;
}
</style>
